<template>
    <a-modal
        :visible="visible"
        :title="title"
        :width="width"
        :maskClosable="false"
        :destroyOnClose="true"
        :bodyStyle="{padding: '0px'}"
        @cancel="handleCancel"
        @ok="handleOk"
    >
        <div id="selectAddress" :style="setMapStyle()" ref="selectMap"></div>
    </a-modal>
</template>

<script>
export default {
    name: "select-Address",
    //自定义v-model
    model: {
        prop: 'visible',
        event: 'change'
    },
    props: {
        title: {
            type: String,
            default: '选择地址'
        },
        width: {
            type: Number,
            default: 800
        },
        height: {
            type: Number,
            default: 600
        },
        address: {
            type: String,
            default: ''
        },
        lng: {
            type: Number,
            default: 116.397428
        },
        lat: {
            type: Number,
            default: 39.90923
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            map: null,
            marker: null,
            geocoder: null,
            lnglat: null,
            addressInfo: null
        }
    },
    methods: {
        initMap() {
            this.map = new AMap.Map('selectAddress', {
                resizeEnable: true,
                zoom: 13,
                center: [this.lng, this.lat]
            });
            this.geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
            });
            this.marker = new AMap.Marker({
                map: this.map,
                position: [this.lng, this.lat],
                draggable: true,
                //关闭描边
                strokeWeight: 0.5,
                //设置描边颜色
                strokeColor: '#FF33FF',
            });
            this.marker.setLabel({
                direction: 'bottom',
                offset: new AMap.Pixel(0, 0),
                content:`<div style="font-size:12px;border: none">${this.address}</div>`,
            })
            this.map.on('click', (e) => {
                console.log(`click e`, e)
                this.marker.setPosition(e.lnglat);

                console.log(`this.marker`,this.marker)
                this.lnglat = e.lnglat;
                this.getAddress();
            });
        },

        //逆地理编码
        getAddress() {
            this.geocoder.getAddress(this.lnglat, (status, result) => {
                if (status === 'complete' && result.info === 'OK') {
                    console.log(`this.lnglat`,this.lnglat)
                    console.log(`result`, result)
                    this.addressInfo = {...result.regeocode,lng: this.lnglat.lng,lat: this.lnglat.lat};
                    this.marker.setLabel({
                        direction: 'bottom',
                        offset: new AMap.Pixel(0, 0),
                        content: `<div style="font-size:14px;border: none">${this.addressInfo.formattedAddress}</div>`,
                    })
                    // this.$emit('selectAddress', {
                    //     address: this.addressInfo.formattedAddress,
                    //     lng: this.lnglat.lng,
                    //     lat: this.lnglat.lat
                    // })
                }
            });
        },
        handleOk() {
            this.$emit('change', false)
            this.$emit('ok', this.addressInfo)
        },
        handleCancel() {
            this.$emit('change', false)
        },
        setMapStyle() {
            return `width:${this.width}px;height:${this.height}px;`
        }
    },
    watch: {
        visible(val) {
            console.log('selectAddress visible', val)
            if (val) {
             this.$nextTick(() => {
                 this.initMap();
             })
            }
        }
    }
}
</script>

<style lang="less" scoped>
/deep/ .amap-markers {
    .amap-icon {
        img {
            width: 25px;
            height: 25px;
        }
    }
    .amap-marker-label {
        position: absolute;
        z-index: 2;
        border: none;
        background-color: #fff;
        white-space: nowrap;
        cursor: default;
        padding: 10px 12px;
        font-size: 14px;
        line-height: 14px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
        border-radius: .25rem;
    }
}
</style>